<!DOCTYPE html>
<html lang="en">
<head>
  	<title>Typography</title>
  	<meta charset="utf-8">
    <meta name="description" content="Your description">
    <meta name="keywords" content="Your keywords">
    <meta name="author" content="Your name">
	<link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/script.js"></script>
<!--[if lt IE 8]>
   <div style=' clear: both; text-align:center; position: relative;'>
     <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
       <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
    </a>
  </div>
<![endif]-->
<!--[if lt IE 9]>
	<script src="js/html5.js"></script>
	<link rel="stylesheet" href="css/ie.css"> 
<![endif]-->
</head>
<body>
<!-- PRO Framework Panel Begin -->
<!-- <div id="advanced"><span class="trigger"><strong></strong><em></em></span><div class="bg_pro"><div class="pro_main"><a href="" class="pro_logo"></a><ul class="pro_menu"><li><a href="index.html"><img src="images/pro_home.png" alt=""></a></li><li><a href="404.html">Pages<span></span></a><ul><li><a href="under_construction.html">Under Construction</a></li><li><a href="intro.html">Intro Page</a></li><li><a href="404.html">404 page</a></li></ul></li><li><a href="layouts.html">Layouts</a></li><li class="current"><a href="typography.html">Typography</a></li><li><a href="portfolio.html">Gallery Layouts<span></span></a><ul><li><a href="portfolio.html">Portfolio</a></li><li><a href="just-slider.html">Sliders</a><ul><li><a href="just-slider.html">Just Slider</a></li><li><a href="kwicks.html">Kwicks Slider</a></li><li><a href="functional-slider.html">Functional Slider</a></li></ul></li><li><a href="gallery-page1.html">Gallery</a></li></ul></li><li><a href="misc.html">Extras<span></span></a><ul><li><a href="social_media.html">Social and Media<br> Sharing</a></li><li><a href="css3.html">CSS3 Tricks</a></li><li><a href="misc.html">Misc</a></li></ul></li></ul><div class="clear"></div></div></div><div class="bg_pro2"></div></div> -->
<!-- PRO Framework Panel End -->
<div class="bg-main">
<!--==============================header=================================-->
	<header>
		<div class="container_24">
			<div class="wrapper">
				<div class="grid_17">
					<h1><a href="index.html">Idealex</a></h1>
				</div>
				<div class="grid_7">
					<form id="search2">
						 <div class="fleft"><input type="text"></div>
						 <a onClick="document.getElementById('search2').submit()">search</a>
					</form>
				</div>
			</div>
		</div>
		<nav class="main-menu">
			<ul class="sf-menu">
				<li><a href="index.html"><em>about Us</em><strong></strong></a><ul>
						<li><a href="more.html">Who We Are</a></li>
						<li><a href="more.html">News</a></li>
						<li><a href="more.html">Products</a></li>
					</ul>
				</li>
				<li><a href="index-1.html"><em>services</em><strong></strong></a></li>
				<li><a href="index-2.html"><em>solutions</em><strong></strong></a></li>
				<li><a href="index-3.html"><em>Training</em><strong></strong></a></li>
				<li><a href="index-4.html"><em>support</em><strong></strong></a></li>
				<li><a href="index-5.html"><em>Clients</em><strong></strong></a></li>
				<li class="last"><a href="index-6.html"><em>contacts</em><strong></strong></a></li>
			</ul>
			<div class="clear"></div>
		</nav>
	</header>
<!--==============================section=================================-->
	<section class="padsection7">
	<div class="container_24">
		<div class="wrapper"><div class="grid_24"><h1 class="title3">Typography Page</h1></div></div>
		<div class="wrapper">
<!-- Headings Begin -->
			<div class="grid_8">
				<h2 class="title3">Headings</h2>
				<h1 class="title-padding">Heading 1</h1>
				<h2 class="title-padding">Heading 2</h2>
				<h3 class="title-padding">Heading 3</h3>
				<h4 class="title-padding">Heading 4</h4>
				<h5 class="title-padding">Heading 5</h5>
				<h3 class="title-padding">Heading 6</h3>
			</div>
<!-- Headings End -->
<!-- Other Elements Begin -->
			<div class="grid_16">
                <h2 class="title3">Other elements styling</h2>
				<div class="wrapper">
					<div class="grid_8 alpha">
						<ul class="elements-list">
							<li>This is <abbr title="title">abbreviation</abbr>
							<code><abbr> </abbr></code>
							</li>
							<li>This is <strong>strong</strong>
							<code><strong> </strong></code>
							</li>
							<li>This is <em>emphasis</em>
							<code><em> </em></code>
							</li>
							<li>This is <b>bold text</b>
							<code><b> </b></code>
							</li>
							<li>This is <i>italic text</i>
							<code><i> </i></code>
							</li>
							<li>This is <cite>cite</cite>
							<code><cite> </cite></code>
							</li>
							<li>This is <small>small text</small>
							<code><small> </small></code>
							</li>
							<li>This is <del>deleted text</del>
							<code><del> </del></code>
							</li>
						</ul>
					</div>
					<div class="grid_8 omega">
						<ul class="elements-list">
							<li>This is <ins>inserted text</ins>
							<code><ins> </ins></code>
							</li>
							<li>This is <dfn>defining instance</dfn>
							<code><dfn> </dfn></code>
							</li>
							<li>This is <kbd>user input</kbd>
							<code><kbd> </kbd></code>
							</li>
							<li>This is <samp>sample output</samp>
							<code><samp> </samp></code>
							</li>
							<li>This is <q>&ldquo;inline quotation&rdquo;</q>
							<code><q> </q></code>
							</li>
							<li>This is <sup>superscript</sup>
							<code><sup> </sup></code>
							</li>
							<li>This is <sub>subscript</sub>
							<code><sub> </sub></code>
							</li>
							<li>This is a <var>variable</var>
							<code><var> </var></code>
							</li>
						</ul>
					</div>
            	</div>
			</div>
<!-- Other Elements End -->
		</div>
<!-- Buttons Begin -->
		<div class="wrapper">
			<div class="grid_24">
				<h2 class="title">Buttons</h2>
			</div>
		</div>
		<div class="">
			<div class="grid_12">
				<p>Add desired class to the <strong><a> </strong>tag (<a href="" class=""> Button Text </a>)</p>
				<div class="grid_6 alpha">
					<div class="btn-indent"><span><a href="" class="btn small">Small</a></span><code class="small-box-code">class="btn small"</code></div>
					<div class="btn-indent3"><span><a href="" class="btn medium">Medium</a></span><code class="small-box-code">class="btn medium"</code></div>
					<div class="btn-indent3"><span><a href="" class="btn large">Large</a></span><code class="small-box-code">class="btn large"</code></div>
					<div class="btn-indent3"><span><a href="" class="btn prev"><span></span>Previous</a></span><span><a href="" class="btn next">Next<span></span></a></span>
					<code class="small-box-code">class="btn prev"<br>class="btn next"</code></div>
				</div>
				<div class="grid_6 omega">
					<div class="btn-indent"><span><a href="" class="btn">Default</a></span><code class="small-box-code"><a class="btn"> </a></code></div>
					<div class="btn-indent"><span><a href="" class="btn success">Success</a></span><code class="small-box-code">class="btn success"</code></div>
					<div class="btn-indent"><span><a href="" class="btn warning">Warning</a></span><code class="small-box-code">class="btn warning"</code></div>
					<div class="btn-indent"><span><a href="" class="btn danger">Danger</a></span><code class="small-box-code">class="btn danger"</code></div>
					<div class="btn-indent"><span><a href="" class="btn inf">Info</a></span><code class="small-box-code">class="btn inf"</code></div>
				</div>
				<div class="clear"></div>
				<div class="btn-indent">
					<ul class="pages">
						<li><a href="" class="btn prev"><span></span></a></li>
						<li class="current"><a href="" class="btn page">1</a></li>
						<li><a href="" class="btn page">2</a></li>
						<li><a href="" class="btn page">3</a></li>
						<li><a href="" class="btn page">4</a></li>
						<li><a href="" class="btn page">5</a></li>
						<li><a href="" class="btn next"><span></span></a></li>
					</ul>
				</div>
				<div class="code-box">
					<pre class="htmlCode2">
<ul class="pages">
	<li><a href="" class="btn prev"><span></span></a></li>
	<li class="current"><a href="" class="btn page">1</a></li>
	...
	<li><a href="" class="btn next"><span></span></a></li>
</ul></pre>
				</div>
			</div>
			<div class="">
				<div class="grid_12">
					<p>Add desired class to the <strong><a></strong> tag with <strong><span></strong> tag inside (<a href="" class=""><span></span> Button Text </a>)</p>
					<div class="grid_6 alpha">
						<div class="btn-indent"><span><a href="" class="btn sign-in"><span></span>Sign In</a></span><code class="small-box-code">class="btn sign-in"</code></div>
						<div class="btn-indent"><span><a href="" class="btn sign-out"><span></span>Sign Out</a></span><code class="small-box-code">class="btn sign-out"</code></div>
						<div class="btn-indent"><span><a href="" class="btn site-map"><span></span>Site Map</a></span><code class="small-box-code">class="btn site-map"</code></div>
						<div class="btn-indent"><span><a href="" class="btn comment"><span></span>Comment</a></span><code class="small-box-code">class="btn comment"</code></div>
						<div class="btn-indent"><span><a href="" class="btn refresh"><span></span>Refresh</a></span><code class="small-box-code">class="btn refresh"</code></div>
						<div class="btn-indent"><span><a href="" class="btn print2"><span></span>Print</a></span><code class="small-box-code">class="btn print2"</code></div>
					</div>
					<div class="grid_6 omega">
						<div class="btn-indent"><span><a href="" class="btn comment2 inf"><span></span>Comment</a></span><code class="small-box-code">class="btn comment2 inf"</code></div>
						<div class="btn-indent"><span><a href="" class="btn calend warning"><span></span>Calendar</a></span><code class="small-box-code">class="btn calend warning"</code></div>
						<div class="btn-indent"><span><a href="" class="btn print success"><span></span>Print</a></span><code class="small-box-code">class="btn print success"</code></div>
						<div class="btn-indent"><span><a href="" class="btn bookmark danger"><span></span>Bookmark</a></span><code class="small-box-code">class="btn bookmark danger"</code></div>
						<div class="btn-indent"><span><a href="" class="btn dwload inf"><span></span>Download</a></span><code class="small-box-code">class="btn dwload inf"</code></div>
						<div class="btn-indent"><span><a href="" class="btn settings success"><span></span>Settings</a></span><code class="small-box-code">class="btn settings success"</code></div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
		</div>
<!-- Buttons End -->
<!-- Breadcrumbs Begin -->
		<div class="wrapper">
			<div class="grid_24">
				<h2 class="title">Breadcrumbs</h2>
				<div class="breadcrumbs-indent">
					<ul id="breadcrumbs-one">
						<li><a href="">Lorem ipsum</a></li>
						<li><a href="">Vivamus nisi eros</a></li>
						<li><a href="">Nulla sed lorem risus</a></li>
						<li><a href="">Nam iaculis commodo</a></li>
						<li><a href="" class="current">You are here</a></li>
					</ul>
				</div>
				<div class="breadcrumbs-indent">
					<ul id="breadcrumbs-two">
						<li><a href="">Lorem ipsum</a></li>
						<li><a href="">Vivamus nisi eros</a></li>
						<li><a href="">Nulla sed lorem risus</a></li>
						<li><a href="">Nam iaculis commodo</a></li>
						<li><a href="" class="current">You are here</a></li>
					</ul>
				</div>
				<div class="breadcrumbs-indent">
					<ul id="breadcrumbs-four">
						<li><a href="">Lorem ipsum</a></li>
						<li><a href="">Vivamus nisi eros</a></li>
						<li><a href="">Nulla sed lorem risus</a></li>
						<li><a href="">Nam iaculis commodo</a></li>
						<li><a href="" class="current">You are here</a></li>
					</ul>
				</div>
				<dl class="description-box">
					<dt><a class="description-dark">Description<span></span></a></dt>
					<dd>
						<div class="inner">
						<p>Breadcrumbs Style 1</p>
<pre class="htmlCode">
<ul id="breadcrumbs-one">
	<li><a href=""> 1 </a></li>
	<li><a href=""> 2 </a></li>
	...
	<li><a href="" class="current"> You are here </a></li>
</ul></pre>
						<p>Breadcrumbs Style 2</p>
<pre class="htmlCode">
<ul id="breadcrumbs-two">
	<li><a href=""> 1 </a></li>
	<li><a href=""> 2 </a></li>
	...
	<li><a href="" class="current"> You are here </a></li>
</ul></pre>
						<p>Breadcrumbs Style 3</p>
<pre class="htmlCode">
<ul id="breadcrumbs-four">
	<li><a href=""> 1 </a></li>
	<li><a href=""> 2 </a></li>
	...
	<li><a href="" class="current"> You are here </a></li>
</ul></pre>
						</div>
					</dd>
				</dl>
			</div>
		</div>
<!-- Breadcrumbs End -->
<!-- Lists Begin -->
		<div class="wrapper">
			<div class="grid_24"><h2 class="title">Lists</h2></div>
		</div>
		<div class="list-wrapper">
			<div class="list-car">
				<ul>
					<li class="grid_6">
						<h3>Ordered List</h3>
						<ol>
							<li><a href="">Advertising</a></li>
							<li><a href="">Lead Generation</a></li>
							<li><a href="">Online Marketing Advice</a></li>
							<li><a href="">Competition Analysis</a></li>
							<li><a href="">Product Analysis</a></li>
							<li><a href="">Direct Mail &amp; Mass Marketing</a></li>
							<li><a href="">Branding &amp; Rebranding</a></li>
							<li><a href="">International Marketing</a></li>
							<li><a href="">Lead Generation</a></li>
							<li><a href="">Online Marketing Advice</a></li>
						</ol>
					</li>
					<li class="grid_6">
						<h3>Ordered List 2</h3>
						<ol class="list3">
							<li><a href="">Advertising</a></li>
							<li><a href="">Lead Generation</a></li>
							<li><a href="">Online Marketing Advice</a></li>
							<li><a href="">Competition Analysis</a></li>
							<li><a href="">Product Analysis</a></li>
							<li><a href="">Direct Mail &amp; Mass Marketing</a></li>
							<li><a href="">Branding &amp; Rebranding</a></li>
							<li><a href="">International Marketing</a></li>
							<li><a href="">Lead Generation</a></li>
							<li><a href="">Online Marketing Advice</a></li>
						</ol>
					</li>
					<li class="grid_6">
						<h3>Unordered List 1</h3>
						<ul class="list1">
							<li><a href="">Advertising</a></li>
							<li><a href="">Lead Generation</a></li>
							<li><a href="">Online Marketing Advice</a></li>
							<li><a href="">Competition Analysis</a></li>
							<li><a href="">Product Analysis</a></li>
							<li><a href="">Direct Mail &amp; Mass Marketing</a></li>
							<li><a href="">Branding &amp; Rebranding</a></li>
							<li><a href="">International Marketing</a></li>
							<li><a href="">Lead Generation</a></li>
							<li><a href="">Online Marketing Advice</a></li>
						</ul>
					</li>
					<li class="grid_6">
						<h3>Unordered List 2</h3>
						<ul class="list2">
							<li><a href="">Advertising Lead Generation</a></li>
							<li><a href="">Online Marketing Advice Competition Analysis</a></li>
							<li><a href="">Product Analysis Direct Mail &amp; Mass Marketing</a></li>
							<li><a href="">Branding &amp; Rebranding</a></li>
							<li><a href="">International Marketing</a></li>
							<li><a href="">Online Marketing Advice</a></li>
						</ul>
					</li>
					<li class="grid_6">
						<h3>Mixed List</h3>
						<ol>
							<li><a href="">Advertising</a></li>
							<li><a href="">Lead Generation</a></li>
							<li><a href="">Online Marketing Advice</a>
								<ul class="list1">
									<li><a href="">Direct Mail &amp; Mass Marketing</a></li>
									<li><a href="">Branding &amp; Rebranding</a></li>
									<li><a href="">International Marketing</a></li>
								</ul>
							</li>
							<li><a href="">Competition Analysis</a></li>
							<li><a href="">Product Analysis</a></li>
							<li><a href="">Online Marketing Advice</a></li>
							<li><a href="">International Marketing</a></li>
						</ol>
					</li>
					<li class="grid_6">
						<h3>Definition List</h3>
						<dl>
							<dt>A definition term</dt>
							<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Cras ultricies, quam ac lobortis porta.</dd>
							<dt>A definition term</dt>
							<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Cras ultricies, quam ac lobortis porta.</dd>									
						</dl>
					</li>
				</ul>
				<div class="clear"></div>
			</div>
			<a href="#" class="btn prev car-button" data-type="prev"><span></span></a>
			<a href="#" class="btn next car-button" data-type="next"><span></span></a>
		</div>
		<div class="wrapper">
			<div class="grid_24">
				<dl class="description-box description-box-pad">
					<dt><a class="description-dark">Description<span></span></a></dt>
					<dd>
						<div class="inner">
						<p>Ordered List</p>
<pre class="htmlCode"><ol>
	<li> <a href=""> ... </a> </li>
	<li> ... </li>
	...
</ol></pre>
						<p>Ordered List 2</p>
<pre class="htmlCode"><ol class="list3">
	<li> <a href=""> ... </a> </li>
	<li> ... </li>
	...
</ol></pre>
						<p>Unordered List 1</p>
<pre class="htmlCode"><ul class="list1">
	<li> <a href=""> ... </a> </li>
	<li> ... </li>
	...
</ul></pre>
						<p>Unordered List 2</p>
<pre class="htmlCode"><ul class="list2">
	<li> <a href=""> ... </a> </li>
	<li> ... </li>
	...
</ul></pre>
						<p>Mixed List</p>
<pre class="htmlCode"><ol>
	<li> <a href=""> ... </a> </li>
	<li>
		<ul class="list1">
			<li> ... </li>
		</ul>
	</li>
	...
</ol></pre>
						<p>Definition List</p>
<pre class="htmlCode"><dl>
	<dt> <a href=""> ... </a> </dt>
	<dd> ... </dd>
	<dt> <a href=""> ... </a> </dt>
	<dd> ... </dd>
	...
</dl></pre>
						</div>
					</dd>
				</dl>
			</div>
		</div>
<!-- Lists End -->
<!-- Tables Begin -->
		<div class="wrapper"><div class="grid_24"><h2 class="title">Tables</h2></div></div>
	</div>
	<div class="tabs tabs3">
		<div class="wrapper">
			<ul class="layouts-menu">
				<li class="table1"><a href="#" class="current"><span></span></a></li>
				<li class="table2"><a href="#"><span></span></a></li>
				<li class="table3"><a href="#"><span></span></a></li>
				<li class="table4"><a href="#"><span></span></a></li>
			</ul>
		</div>
		<div class="tab-content">
			<div class="container_24">
				<div class="wrapper">
					<div class="grid_24">
						<h3>Default table</h3>
						<table class="table">
							<thead>
								<tr>
								<th>Header1</th>
								<th>Header2</th>
								<th>Header3</th>
								<th>Header4</th>
								<th>Header5</th>
								<th>Header6</th>
								</tr>
							</thead>
							<tbody>
								<tr>
								<td>Division 1</td>
								<td>Division 2</td>
								<td>Division 3</td>
								<td>Division 4</td>
								<td>Division 5</td>
								<td>Division 6</td>
								</tr>
								<tr>
								<td>Division 1</td>
								<td>Division 2</td>
								<td>Division 3</td>
								<td>Division 4</td>
								<td>Division 5</td>
								<td>Division 6</td>
								</tr>
								<tr>
								<td>Division 1</td>
								<td>Division 2</td>
								<td>Division 3</td>
								<td>Division 4</td>
								<td>Division 5</td>
								<td>Division 6</td>
								</tr>
								<tr>
								<td>Division 1</td>
								<td>Division 2</td>
								<td>Division 3</td>
								<td>Division 4</td>
								<td>Division 5</td>
								<td>Division 6</td>
								</tr>
								<tr>
								<td>Division 1</td>
								<td>Division 2</td>
								<td>Division 3</td>
								<td>Division 4</td>
								<td>Division 5</td>
								<td>Division 6</td>
								</tr>
							</tbody>
						</table>
						<dl class="description-box">
							<dt><a class="description-dark">Description<span></span></a></dt>
							<dd>
								<div class="inner">
<pre class="htmlCode"><table class="table">
	<thead>
		<tr>
			<th> ... </th>
			...
		</tr>
	</thead>
	<tbody>
		<tr>
			<td> ...</td>
			...
		</tr>
	</tbody>
</table></pre>
								</div>
							</dd>
						</dl>
					</div>
				</div>
			</div>
		</div>
		<div class="tab-content">
			<div class="container_24">
				<div class="wrapper">
					<div class="grid_24">
						<h3>Striped table</h3>
						<table class="table table-striped">
							<thead>
								<tr>
								<th>Header1</th>
								<th>Header2</th>
								<th>Header3</th>
								<th>Header4</th>
								<th>Header5</th>
								<th>Header6</th>
								</tr>
							</thead>
							<tbody>
								<tr>
								<td>Division 1</td>
								<td>Division 2</td>
								<td>Division 3</td>
								<td>Division 4</td>
								<td>Division 5</td>
								<td>Division 6</td>
								</tr>
								<tr>
								<td>Division 1</td>
								<td>Division 2</td>
								<td>Division 3</td>
								<td>Division 4</td>
								<td>Division 5</td>
								<td>Division 6</td>
								</tr>
								<tr>
								<td>Division 1</td>
								<td>Division 2</td>
								<td>Division 3</td>
								<td>Division 4</td>
								<td>Division 5</td>
								<td>Division 6</td>
								</tr>
								<tr>
								<td>Division 1</td>
								<td>Division 2</td>
								<td>Division 3</td>
								<td>Division 4</td>
								<td>Division 5</td>
								<td>Division 6</td>
								</tr>
								<tr>
								<td>Division 1</td>
								<td>Division 2</td>
								<td>Division 3</td>
								<td>Division 4</td>
								<td>Division 5</td>
								<td>Division 6</td>
								</tr>
							</tbody>
						</table>
						<dl class="description-box">
							<dt><a class="description-dark">Description<span></span></a></dt>
							<dd>
								<div class="inner">
<pre class="htmlCode"><table class="table table-striped">
	<thead>
		<tr>
			<th> ... </th>
			...
		</tr>
	</thead>
	<tbody>
		<tr>
			<td> ...</td>
			...
		</tr>
	</tbody>
</table></pre>
								</div>
							</dd>
						</dl>
					</div>
				</div>
			</div>
		</div>
		<div class="tab-content">
			<div class="container_24">
				<div class="wrapper">
					<div class="grid_24">
						<h3>Bordered table</h3>
						<table class="table table-bordered">
							<thead>
								<tr>
								<th>Header1</th>
								<th>Header2</th>
								<th>Header3</th>
								<th>Header4</th>
								<th>Header5</th>
								<th>Header6</th>
								</tr>
							</thead>
							<tbody>
								<tr>
								<td>Division 1</td>
								<td>Division 2</td>
								<td>Division 3</td>
								<td>Division 4</td>
								<td>Division 5</td>
								<td>Division 6</td>
								</tr>
								<tr>
								<td>Division 1</td>
								<td>Division 2</td>
								<td>Division 3</td>
								<td>Division 4</td>
								<td>Division 5</td>
								<td>Division 6</td>
								</tr>
								<tr>
								<td>Division 1</td>
								<td>Division 2</td>
								<td>Division 3</td>
								<td>Division 4</td>
								<td>Division 5</td>
								<td>Division 6</td>
								</tr>
								<tr>
								<td>Division 1</td>
								<td>Division 2</td>
								<td>Division 3</td>
								<td>Division 4</td>
								<td>Division 5</td>
								<td>Division 6</td>
								</tr>
								<tr>
								<td>Division 1</td>
								<td>Division 2</td>
								<td>Division 3</td>
								<td>Division 4</td>
								<td>Division 5</td>
								<td>Division 6</td>
								</tr>
							</tbody>
						</table>
						<dl class="description-box">
							<dt><a class="description-dark">Description<span></span></a></dt>
							<dd>
								<div class="inner">
<pre class="htmlCode"><table class="table table-bordered">
	<thead>
		<tr>
			<th> ... </th>
			...
		</tr>
	</thead>
	<tbody>
		<tr>
			<td> ...</td>
			...
		</tr>
	</tbody>
</table></pre>
								</div>
							</dd>
						</dl>
					</div>
				</div>
			</div>
		</div>
		<div class="tab-content">
			<div class="container_24">
				<div class="wrapper">
					<div class="grid_24">
						<h3>Combined table</h3>
						<table class="table table-bordered table-striped2">
							<thead>
								<tr>
								<th>Header1</th>
								<th>Header2</th>
								<th>Header3</th>
								<th>Header4</th>
								<th>Header5</th>
								<th>Header6</th>
								</tr>
							</thead>
							<tbody>
								<tr>
								<td>Division 1</td>
								<td>Division 2</td>
								<td>Division 3</td>
								<td>Division 4</td>
								<td>Division 5</td>
								<td>Division 6</td>
								</tr>
								<tr>
								<td>Division 1</td>
								<td>Division 2</td>
								<td>Division 3</td>
								<td>Division 4</td>
								<td>Division 5</td>
								<td>Division 6</td>
								</tr>
								<tr>
								<td>Division 1</td>
								<td>Division 2</td>
								<td>Division 3</td>
								<td>Division 4</td>
								<td>Division 5</td>
								<td>Division 6</td>
								</tr>
								<tr>
								<td>Division 1</td>
								<td>Division 2</td>
								<td>Division 3</td>
								<td>Division 4</td>
								<td>Division 5</td>
								<td>Division 6</td>
								</tr>
								<tr>
								<td>Division 1</td>
								<td>Division 2</td>
								<td>Division 3</td>
								<td>Division 4</td>
								<td>Division 5</td>
								<td>Division 6</td>
								</tr>
							</tbody>
						</table>
						<dl class="description-box">
							<dt><a class="description-dark">Description<span></span></a></dt>
							<dd>
								<div class="inner">
<pre class="htmlCode"><table class="table table-bordered table-striped2">
	<thead>
		<tr>
			<th> ... </th>
			...
		</tr>
	</thead>
	<tbody>
		<tr>
			<td> ...</td>
			...
		</tr>
	</tbody>
</table></pre>
								</div>
							</dd>
						</dl>
					</div>
				</div>
			</div>
		</div>
	</div>
<!-- Tables End -->
	<div class="container_24">
<!-- Forms Begin -->
		<div class="wrapper"><div class="grid_24"><h2 class="title">Forms</h2></div></div>
		<div class="">
			<div class="grid_8">
				<h3>Simple Form</h3>
				<form id="form1">
					<label><span class="text-form">First Name:</span><input type="text"></label>
					<label><span class="text-form">Last Name:</span><input type="text"></label>
					<label>
						<span class="text-form">Country:</span>
						<select>
							<option>United States</option>
							<option>United States</option>
						</select>
					</label>
					<label>
						<span class="text-form">Message:</span><br>
						<textarea></textarea>
					</label>
					<span class="pad-form">
						<input type="radio" name="group1"><span class="text-form2">Male</span><br>
						<input type="radio" name="group1"><span class="text-form2">Female</span>
					</span><br>
					<input type="checkbox"><span class="text-form3">Sign me up for your newsletter</span>
					<div class="btns"><a class="btn" onClick="document.getElementById('form1').submit()">Submit</a></div>
				</form>
			</div>
			<div class="grid_8">
				<h3>Advanced Form</h3>
				<form id="form2">
					<label><span class="text-form">First Name:</span><input type="text"></label>
					<label><span class="text-form">Last Name:</span><input type="text"></label>
					<label>
						<span class="text-form fleft">Country:</span>
						<select>
							<option>United States</option>
							<option>United States</option>
						</select>
					</label>
					<label>
						<span class="text-form">Message:</span><br>
						<textarea></textarea>
					</label>
					<div class="wrapper pad-form"><input type="radio" name="group1"><div class="text-form2 fleft">Male</div></div>
					<div class="wrapper"><input type="radio" name="group1"><div class="text-form2 fleft">Female</div></div>
					<div class="wrapper"><input type="checkbox"><div class="text-form3 fleft">Sign me up for your newsletter</div></div>
					<div class="btns"><a class="btn" onClick="document.getElementById('form2').submit()">Submit</a></div>
				</form>
			</div>
			<div class="grid_8">
				<h3>Contacts Form</h3>
				<form id="contact-form">
                    <div class="success">Contact form submitted! <strong>We will be in touch soon.</strong></div>
                    <fieldset>
                        <label class="name">
                            <input type="text" value="Name">
                            <span class="error">*This is not a valid name.</span>
                            <span class="empty">*This field is required.</span>
                            <span class="clear"></span>
                        </label>
                        <label class="email">
                            <input type="text" value="E-mail">
                            <span class="error">*This is not a valid email address.</span>
                            <span class="empty">*This field is required.</span>
                            <span class="clear"></span>
                        </label>
                        <label class="phone">
                            <input type="text" value="Phone">
                            <span class="error">*This is not a valid phone number.</span>
                            <span class="empty">*This field is required.</span>
                            <span class="clear"></span>
                        </label>
                        <label class="message">
                            <textarea>Message</textarea>
                            <span class="error">*The message is too short.</span>
                            <span class="empty">*This field is required.</span>
                            <span class="clear"></span>
                        </label>
                        <div class="buttons"><span><a class="btn" data-type="reset">Clear</a></span><span><a class="btn" data-type="submit">Send</a></span></div>
                    </fieldset>
                </form>
			</div>
			<div class="clear"></div>
		</div>
		<div class="wrapper">
			<div class="grid_24">
				<dl class="description-box description-box-pad">
					<dt><a class="description-dark">Description<span></span></a></dt>
					<dd>
						<div class="inner">
						<p class="descr_title">Simple Form</p>
						<p>To add new text field to the form duplicate the following code:</p>
						<pre class="htmlCode"><label><span class="text-form">First Name:</span><input type="text"></label></pre>
						<p>To create select box use the following code:</p>
						<pre class="htmlCode"><label>
	<span class="text-form">Country:</span>
	<select>
		<option>United States</option>
		<option>United States</option>
	</select>
</label></pre>
						<p>To add new options to the select box use the tag &quot;option&quot;:<strong> <option></strong>Your Text<strong></option></strong></p>
						<p>To create multiple radio buttons use:</p>
						<pre class="htmlCode"><div class="wrapper"><input type="radio" name="group1"><div class="text-form2 fleft">Yout Text</div></div></pre>
						<p>Please note that all &quot;input&quot; tags with attribute <strong>type="radio"</strong> should have same name <strong>name="NameOfRadioGroup"</strong></p>
						<p>Checkbox can be created using the following code:</p>
						<pre class="htmlCode"><div class="wrapper"><input type="checkbox"><div class="text-form3 fleft">Sign me up for your newsletter</div></div></pre>
						<p>Any input tag can be displayed as checkbox. To do this type &quot;checkbox&quot; for the input tag type attribute (<input type="checkbox">)</p>
						<p>This is an example of plain form, without any styles. Such elements as &quot;select&quot;, &quot;radio&quot;, &quot;checkbox&quot; will change appearance depending on your operating system.</p>
<pre class="htmlCode"><form id="form1">
	<label><span class="text-form">First Name:</span><input type="text"></label>
	...
	<label>
		<span class="text-form fleft">Country:</span>
		<select>
			<option>United States</option>
			<option>United States</option>
		</select>
	</label>
	<label>
		<div class="text-form">Message:</div>
		<textarea></textarea>
	</label>
	<div class="wrapper"><input type="radio" name="group1"><div class="text-form2 fleft">Male</div></div>
	<div class="wrapper"><input type="radio" name="group1"><div class="text-form2 fleft">Female</div></div>
	<div class="wrapper"><input type="checkbox"><div class="text-form3 fleft">Sign me up for your newsletter</div></div>
	<a class="btn">Send</a>
</form></pre>
						<p class="descr_title">Advanced Form</p>
						<p>This form is styled using the jqTransform plugin. All form elements will be displayed identically in all browsers and operating systems. Adding new elements can be done the same way as for the simple form but note that form ID should be &quot;form2&quot;</p>
<pre class="htmlCode"><form id="form2">
	<label><span class="text-form">First Name:</span><input type="text"></label>
	...
	<label>
		<span class="text-form fleft">Country:</span>
		<select>
			<option>United States</option>
			<option>United States</option>
		</select>
	</label>
	<label>
		<div class="text-form">Message:</div>
		<textarea></textarea>
	</label>
	<div class="wrapper"><input type="radio" name="group1"><div class="text-form2 fleft">Male</div></div>
	<div class="wrapper"><input type="radio" name="group1"><div class="text-form2 fleft">Female</div></div>
	<div class="wrapper"><input type="checkbox"><div class="text-form3 fleft">Sign me up for your newsletter</div></div>
	<a class="btn">Send</a>
</form></pre>
							<p class="descr_title">Contacts Form</p>
							<p>You can learn more about working with Contact Form in the Contact Form manual after the template purchase. Manual is located in the "documentation" folder of the template package.</p>
						</div>
					</dd>
				</dl>
			</div>
		</div>
		<div class="wrapper">
			<div class="grid_8">
				<h3 class="title2">Search Form</h3>
				<form id="search">
					 <input type="text">
					 <a class="btn" onClick="document.getElementById('search').submit()">Search</a>
				</form>
			</div>
			<div class="grid_8">
				<h3 class="title2">Subscribe Form</h3>
				<form id="subscribe">
					 <input type="text">
					 <a class="btn" onClick="document.getElementById('subscribe').submit()">Subscribe</a>
				</form>
			</div>
			<div class="grid_8">
				<h3 class="title2">Log In Form</h3>
				<form id="log_in">
					 <input type="text" value="Login" onfocus="if(this.value=='Login'){this.value=''}" onblur="if(this.value==''){this.value='Login'}">
					 <input type="password" value="Password" onfocus="if(this.value=='Password'){this.value=''}" onblur="if(this.value==''){this.value='Password'}">
					 <a class="btn" onClick="document.getElementById('log_in').submit()">Log In</a>
				</form>
			</div>
		</div>
		<div class="wrapper">
			<div class="grid_24">
				<dl class="description-box description-box-pad">
					<dt><a class="description-dark">Description<span></span></a></dt>
					<dd>
						<div class="inner">
						<p class="descr_title">Search Form</p>
<pre class="htmlCode"><form id="search">
	<input type="text">
	<a class="btn">Search</a>
</form></pre>
						<p class="descr_title">Subscribe Form</p>
<pre class="htmlCode"><form id="subscribe">
	<input type="text">
	<a class="btn">Subscribe</a>
</form></pre>
						<p class="descr_title">Log In Form</p>
<pre class="htmlCode"><form id="log_in">
	<input type="text">
	<input type="password">
	<a class="btn">Log In</a>
</form></pre>
						</div>
					</dd>
				</dl>
			</div>
		</div>
<!-- Forms End -->
<!-- Quotes Begin -->
		<div class="wrapper">
			<div class="grid_24">
				<h2 class="title">Blockquotes</h2>
			</div>
		</div>
		<div class="wrapper">
			<div class="grid_8 alpha">
				<blockquote><a href=""><strong>Donec eget tellus non erat</strong></a><br>Ut tellus dolor, dapibus eget, elemenm. Quis que nulla. Vestibulum libero nisl, porta velce lerisque eget, males uada at, neque. Vivmus eget nibh. Etiam cursue vel metus.<br><em>Jessica Priston</em></blockquote>
			<dl class="description-box description-box-pad3">
				<dt><a class="description-dark">Description<span></span></a></dt>
				<dd>
					<div class="inner">
<pre class="htmlCode"><blockquote>
	<!-- insert text here -->
</blockquote></pre>
					</div>
				</dd>
			</dl>
			</div>
			<div class="grid_8">
				<div class="quotes_2">
					<blockquote>“Lorem ipsum dolor amet consectetu 
adipiscing elit. Praesent vestibulum 
molestie lacus. Aenean nonummy 
hendrerit mauris...”</blockquote>
					<span></span>
				</div>
				<div class="quotes-links"><a href="#">Mark Johnson</a><br>
				President and CEO, R&amp;D Services</div>
				<dl class="description-box">
					<dt><a class="description-dark">Description<span></span></a></dt>
					<dd>
						<div class="inner">
<pre class="htmlCode"><div class="quotes_2">
	<blockquote>
	<!-- insert text here -->
	</blockquote>
	<span></span>
</div>
<div class="quotes-links">
	<a href="">Link Text</a>
</div></pre>
						</div>
					</dd>
				</dl>
			</div>
			<div class="grid_8 omega">
				<blockquote class="quotes_3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Ut tellus dolor, dapibus eget, elemenm. Quis que nulla. Vestibulum libero nisl, porta velce lerisque eget, males uada at, neque. Vivmus eget nibh. Etiam cursue vel metus.<img src="images/quote-br.gif" alt=""><br><a href="">Jessica Priston</a></blockquote>
				<dl class="description-box">
					<dt><a class="description-dark">Description<span></span></a></dt>
					<dd>
						<div class="inner">
<pre class="htmlCode"><blockquote class="quotes_3">
	<!-- insert text here -->
	<img src="images/quote-br.gif" alt=""><br>
	<a href="">Link Text</a>
</blockquote></pre>
						</div>
					</dd>
				</dl>
			</div>
		</div>
<!-- Quotes End -->
		<div class="wrapper">
<!-- Info Blocks Begin -->
			<div class="grid_16">
				<h2 class="title">Information blocks</h2>
				<div class="wrapper"><div class="info info-indent">Default</div><div class="code-box"><pre class="htmlCode2"><span class="info"> insert text here </span></pre></div></div>
				<div class="wrapper"><div class="info info-indent info_success">Success</div><div class="code-box"><pre class="htmlCode2"><span class="info info_success"> insert text here </span></pre></div></div>
				<div class="wrapper"><div class="info info-indent info_warning">Warning</div><div class="code-box"><pre class="htmlCode2"><span class="info info_warning"> insert text here </span></pre></div></div>
				<div class="wrapper"><div class="info info-indent info_important">Important</div><div class="code-box"><pre class="htmlCode2"><span class="info info_important"> insert text here </span></pre></div></div>
				<div class="wrapper"><div class="info info-indent info_info">Info</div><div class="code-box"><pre class="htmlCode2"><span class="info info_info"> insert text here </span></pre></div></div>
			</div>
<!-- Info Blocks End -->
<!-- Address Begin -->
			<div class="grid_8">
				<h2 class="title">Address</h2>
				<address class="address-pad">
					8901 Marmora Road, Glasgow, D04 89GR.<br>
					Telephone: +1 959 603 6035<br>
					FAX: +1 504 889 9898<br>
					E-mail: <a href="#">mail@demolink.org</a>
				</address>
				<div class="code-box"><pre class="htmlCode2"><address> insert text here </address></pre></div>
			</div>
<!-- Address End -->
		</div>
	</div>
</section>	
</div>
<!--==============================footer=================================-->
<footer>
	<div class=" container_24">
		<div class="wrapper">
			<div class="grid_6 suffix_2">
				<h1 class="footer-logo"><a href="index.html">idealex</a></h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ultricies odio magna.</p>
				<p class="color1 privacy">&copy; 2012 <span>|</span>  <a href="index-7.html">Privacy Policy</a> <!-- {%FOOTER_LINK} --></p>
			</div>
			<div class="grid_7 suffix_2">
				<h4>Related Links</h4>
				<div class="wrapper">
					<div class="grid_4 alpha">
						<ul class="footer-list">
							<li><a href="more.html">About Us</a></li>
							<li><a href="more.html">Testimonials</a></li>
							<li><a href="more.html">Our Staff</a></li>
							<li><a href="more.html">Events &amp; Press</a></li>
							<li><a href="more.html">Contact Us</a></li>
						</ul>
					</div>
					<div class="grid_3 omega">
						<ul class="footer-list">
							<li><a href="more.html">Sign Up</a></li>
							<li><a href="more.html">Forums</a></li>
							<li><a href="more.html">Affiliate Program</a></li>
							<li><a href="more.html">FAQ</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="grid_7">
				<h4>Follow Us</h4>
				<ul class="tooltips">
					<li><a href="more.html"><img src="images/icon1.png" alt=""><span>RSS</span></a></li>
					<li><a href="more.html"><img src="images/icon3.png" alt=""><span>Facebook</span></a></li>
					<li><a href="more.html"><img src="images/icon2.png" alt=""><span>Twitter</span></a></li>
				</ul>
			</div>
		</div>
	</div>
</footer>
</body>
</html>